<template>
  <div class="barrages">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    >
    </vue-baberrage>
  </div>
</template>

<script>
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";

export default {
  name: "app",
  data() {
    return {
      barrageIsShow: true,
      // 消息框全顯示的高度
      messageHeight: 30,
      boxHeight: 412,
      barrageLoop: true,
      maxWordCount: 120,
      throttleGap: 5000,
      barrageList: [],
      lanesCount: 4,
      msg: "张豪太帅了吧 好喜欢呢",
    };
  },
  mounted() {
    this.addToList();
  },
  methods: {
    addToList() {
      let list = [
        {
          id: 1,
          avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "red",
        },
        {
          id: 2,
           avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "green",
        },
        {
          id: 3,
           avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "normal",
        },
        {
          id: 4,
          avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "blue",
        },
        {
          id: 5,
           avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 3,
          barrageStyle: "red",
        },
        {
          id: 6,
           avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "normal",
        },
        {
          id: 7,
         avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "red",
        },
        {
          id: 8,
          avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "normal",
        },
        {
          id: 9,
          avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "red",
        },
        {
          id: 10,
          avatar:
           "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/09/22/c8aaed56-3d9d-4c67-8ead-36089c32f735zh.jpg",
          msg: this.msg,
          time: Math.random() * 9 + 5,
          barrageStyle: "yellow",
        },
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle,
        });
      });
    },
  },
};
</script>

<style lang="scss">
.barrages-drop {
  .blue {
    border-radius: 50px;
    background: #e6ff75;
    color: #fff;
  }

  .green {

    border-radius: 50px;
    background: #75ffcd;
    color: #fff;
  }
  .red {

    border-radius: 50px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {

    border-radius: 50px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 512px;
    overflow: hidden;
    top: 0;
    margin-top: 130px;
    background: pink;
    font-size: 15px;
  }
}
</style>
